<template>
    <div class="map-controls">
        <button @click="toggleMap" class="toggle-button">
            切换到 {{ currentMap === 'LeafletMap' ? '详细地图' : '粗略地图' }}
        </button>
    </div>
    <div class="map-container">
        <LeafletMap v-if="currentMap === 'LeafletMap'" />
        <ShanghaiMap v-if="currentMap === 'ShanghaiMap'" @district-clicked="onDistrictClicked" />
    </div>
</template>

<script setup lang="ts">
import { ref, } from 'vue';
import LeafletMap from './LeafletMap.vue';
import ShanghaiMap from './ShanghaiMap.vue';
import { useRouter } from 'vue-router';
// import { useRouter } from 'vue-router';

const router = useRouter();
// 当前显示的地图组件
const currentMap = ref('ShanghaiMap'); // 默认显示 
// 切换地图的方法
const toggleMap = () => {
    currentMap.value = currentMap.value === 'LeafletMap' ? 'ShanghaiMap' : 'LeafletMap';
};
// 区域名到路径的映射
const districtPathMap: Record<string, string> = {
    '徐汇区': 'XuHui',
    // 可以继续添加其他区域的映射
};
// 定义点击事件处理函数
const onDistrictClicked = (districtName: string) => {
    console.log(`您点击了：${districtName}`);
    // alert(`您点击了：${districtName}`);
    //跳转到对应的区
    const path = districtPathMap[districtName] || districtName;
    router.push(`/District/${path}`);
};

// 初始化时设置加载状态
// const loading = ref(true);
// onMounted(() => {
//     // 模拟初始加载时间
//     setTimeout(() => {
//         loading.value = false;
//     }, 1000);
// });
</script>

<style>
.map-controls {
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    z-index: 1000;
    /* 确保按钮在最上层 */
}

.toggle-button {
    padding: 5px 10px;
    margin-top: 5px;

    font-size: 16px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
    z-index: 1001;
    /* 确保按钮在最上层 */
}

.toggle-button:hover {
    background-color: #359c6d;
}

.map-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map {
    width: 100%;
    height: 100%;
}
</style>